<template>
	<view class="page-wapper">
		<globalheader title="购买记录">

		</globalheader>
		<view class="page-content">
			<view class="item" v-for="i in state.data">
				<view class="top ss-flex ss-row-between">
					<view class="title">
						{{i.mode}}
					</view>
					<view class="status" :class="i.status===1?'success':i.status===0?'sh':'fail'">
						{{i.status_trans}}
					</view>
				</view>
				<view class="bot  ss-flex ss-row-between">
					<view class="time">
						{{i.created_at}}
					</view>
					<view class="amount">
						{{i.amount}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import LC from '@/LC'
	let state = reactive({

		pageData: {
			page: 1,
			limit:15,
			status: 'loading'
		},


		data: []
	})


	onReachBottom(() => {
		onbottom()
	})

	onLoad(({
		type
	}) => {

		onbottom()

	})

	function onbottom() {

		let {
			status,
			load,
			limit,
			page
		} = state.pageData

		if (status != 'nomore' && !load) {

			getmsg()


		}
	}

	function getmsg() {

		LC.$api.pay.rechargeRecord(state.pageData)
			.then(({
				res,
				data
			}) => {


				state.data = [...state.data, ...data]

				if (data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}


				state.pageData.status = 'loadmore'
				state.pageData.page += 1

			})

	}
</script>

<style lang="scss" scoped>
	.item {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 19rpx;
		margin-bottom: 20rpx;

		.top {

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
			}

			.status {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;

				line-height: 32rpx;

				&.sh {
					color: #FC5652;
				}

				&.fail {
					color: #E93030;
				}

				&.success {
					color: #999;
				}
			}
		}

		.bot {
			margin-top: 8rpx;

			.time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
				line-height: 32rpx;
			}

			.amount {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}
		}
	}

	.left-icon {
		display: flex;
		width: 41rpx;
		height: 42rpx;
	}

	.page-content {
		padding: 32rpx;
	}
</style>